'use strict'
let root = document.getElementById("root");
const time = document.getElementById('time');
const A = document.getElementsByName('a')[0];

A.onclick = () => {

}



/**
 * 创建10万个缺席 -----> 5s 左右
 */
let testOne = () => {
    function createCircle() {
        let circle = new zrender.Circle({
            shape: {
                cx: Math.random() * 800,
                cy: Math.random() * 2000,
                r: 2,
            },
            style: {
                fill: "#F00",
                stroke: "",
            },
        });
        zr.add(circle);
    }
    // 初始化
    let zr = zrender.init(root);
    let n = 100000;
    for (let i = 0; i < n; i++) {
        createCircle();
    }
}

// 优化组内 循环， 统一render50万条  5s左右
let testTwo = () => {
    let zr = zrender.init(root);
    var g = new zrender.Group();
    const n = 500000;
    g.position[0] = 0;
    g.position[1] = 0;
    for (let i = 0; i < n; i++) {
        g.add(new zrender.Circle({
            shape: {
                cx: Math.random() * 800,
                cy: Math.random() * 2000,
                r: 2,
            },
            style: {
                fill: "#F00",
                stroke: "",
            },
        }));
    }
    zr.add(g);
}

// 渐进式渲染
let testThree = () => {
    let zr = zrender.init(root);
    var g = new zrender.Group();
    const n = 500000;
    g.position[0] = 0;
    g.position[1] = 0;
    setInterval(() => {
        for (let i = 0; i < 10000; i++) {
            g.add(new zrender.Circle({
                shape: {
                    cx: Math.random() * 800,
                    cy: Math.random() * 2000,
                    r: 2,
                },
                style: {
                    fill: "#F00",
                    stroke: "",
                },
            }));
        }
        time.innerHTML++;
    }, 1000)
    zr.add(g);
}

// 增量加载数据(ws方式)
let zr = zrender.init(root);
var g = new zrender.Group();
function renderFromWs(data) {
    g.position[0] = 0;
    g.position[1] = 0;
    for (let i = 0; i < data.length; i++) {
        g.add(new zrender.Circle({
            shape: {
                cx: data[i].x,
                cy: data[i].y,
                r: 1,
            },
            style: {
                fill: "#F00",
                stroke: "",
            },
        }));
    }
    time.innerHTML = Number(time.innerHTML) + data.length;
    zr.add(g);
}

// 加渐变
let testFour = () => {
    let zr = zrender.init(root);
    var g = new zrender.Group();
    const n = 10000;
    g.position[0] = 0;
    g.position[1] = 0;
    let arr = []
    setInterval(() => {
        for (let i = 0; i < 1000; i++) {
            arr[i] = new zrender.Circle({
                shape: {
                    cx: Math.random() * 800,
                    cy: Math.random() * 2000,
                    r: 0,
                },
                style: {
                    fill: "#F00",
                    stroke: "",
                },
            })
            g.add(arr[i])
            arr[i].animateTo({
                shape: {
                    r: 2
                },
                style: {
                    fill: 'green'
                }
            }, 100, 0, 'linear', function () {
                console.log('ddddd');
            });
        }
        time.innerHTML++;
    }, 100)
    zr.add(g);
}

// ws加渐变
function renderFromWsLinear(data) {
    g.position[0] = 0;
    g.position[1] = 0;
    let arr = [];
    for (let i = 0; i < data.length; i++) {
        arr[i] = new zrender.Circle({
            shape: {
                cx: data.x,
                cy: data.y,
                r: 0,
            },
            style: {
                fill: "#F00",
                stroke: "",
            },
        })
        g.add(arr[i])
        arr[i].animateTo({
            shape: {
                r: 1
            },
            style: {
                fill: 'green'
            }
        }, 100, 0, 'linear', function () {
            console.log('ddddd');
        });
    }
    time.innerHTML = Number(time.innerHTML) + data.length;
    zr.add(g);
}
